<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>抽奖</title>
		<link rel="stylesheet" type="text/css" href="css/iview.css" />
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iview.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/xlsx.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/swiper-bundle.min.css">
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#lottery {
				width: 100%;
				height: 510px;
				margin: 0px auto;
			}

			#lottery table {
				background-color: #fff;
				width: 100%;
			}

			#lottery table td {
				position: relative;
				width: 130px;
				height: 130px;
				text-align: center;
				color: #333;
				font-index: -999
			}

			#lottery table td a {
				width: 100%;
				height: 100%;
				display: block;
				text-decoration: none;
				background: url(./images/cq.jpg) no-repeat 100%/100%;
			}

			/* #lottery table td a:hover{background-image:url(http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201611/jiaoben4665/lottery2.jpg);} */
			#lottery table td.active .mask {
				display: block;
			}

			.mask {
				width: 100%;
				height: 130px;
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(252, 0, 4, 0.5);
				display: none;
				border-radius: 10px;
			}

			.txt {
				position: relative;
				z-index: 1;
				color: #fff;
			}

			.head {
				display: flex;
				justify-content: space-evenly;
				width: 100%;
				background-color: #E51D20;
				color: #FBF6BF;
			}

			.head>div {
				flex: 1;
			}

			.head .menu {
				display: flex;
				justify-content: flex-end;
				position: relative;
				z-index: 3;
			}

			.remake {
				padding: 10px;
				background-color: #E51D20;
				color: #FBF6BF;
			}

			.remake .title {
				font-weight: bold;
			}

			table td {
				background-color: #EDBD1E;
				/* background-color: #FFEFEF; */
				border: 2px solid #fff;
				border-radius: 10px;
				font-size: 1.2rem;
			}

			.info {
				display: flex;
				align-items: center;
				padding-left: 10px;
			}

			.notice {
				width: 100%;
				height: 30px;
				position: absolute;
				z-index: 2;
				color: #FBF6BF;
			}
			/* 样式重写 */
			.ivu-modal-confirm-body{
				padding-left: 0;
			}
		</style>
		<style type="text/css">
			.swiper-container {
			  width: 100%;
			  height: 100%;
			}
			
			.swiper-slide {
			  text-align: center;
			  font-size: 16px;
			  background: transparent;
			
			  /* Center slide text vertically */
			  display: -webkit-box;
			  display: -ms-flexbox;
			  display: -webkit-flex;
			  display: flex;
			  -webkit-box-pack: center;
			  -ms-flex-pack: center;
			  -webkit-justify-content: center;
			  justify-content: center;
			  -webkit-box-align: center;
			  -ms-flex-align: center;
			  -webkit-align-items: center;
			  align-items: center;
			}
		</style>
	</head>
	<body>
		<div class="notice">
			<div class="swiper-container">
			  <div class="swiper-wrapper" id="notice_data">
			    <!-- <div class="swiper-slide">Slide 1</div>
				<div class="swiper-slide">Slide 2</div>
				<div class="swiper-slide">Slide 3</div>
				<div class="swiper-slide">Slide 4</div> -->
			  </div>
			</div>
		</div>
		<div id="vue">
			<div class="head">
				<div class="info">用户名：{{user.name}}</div>
				<div class="menu">
					<i-button type="primary" @click="record">抽奖记录</i-button>
				</div>
			</div>
			<div id="lottery">
				<table border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td class="lottery-unit lottery-unit-0">
							<span class="txt">
								特等奖</span>
							<div class="mask"></div>
						</td>
						<td class="lottery-unit lottery-unit-1">
							<span class="txt">
								谢谢参与</span>
							<div class="mask"></div>
						</td>
						<td class="lottery-unit lottery-unit-2">
							<span class="txt">
								一等奖</span>
							<div class="mask"></div>
						</td>
					</tr>
					<tr>
						<td class="lottery-unit lottery-unit-7">
							<span class="txt">幸运奖</span>
							<div class="mask"></div>
						</td>
						<td><a href="#" style="display: block;border-radius: 10px;" @click="prize_start"></a></td>
						<td class="lottery-unit lottery-unit-3">
							<span class="txt">二等奖</span>
							<div class="mask"></div>
						</td>
					</tr>
					<tr>
						<td class="lottery-unit lottery-unit-6">
							<span class="txt">谢谢参与</span>
							<div class="mask"></div>
						</td>
						<td class="lottery-unit lottery-unit-5">
							<span class="txt">三等奖</span>
							<div class="mask"></div>
						</td>
						<td class="lottery-unit lottery-unit-4">
							<span class="txt">谢谢参与</span>
							<div class="mask"></div>
						</td>
					</tr>
				</table>
				<div class="remake">
					<div class="title">活动说明:</div>
					<div class="msg">
						1.抽奖对象：<br />
						正月初四~正月初十（2月15日~2月21日）正常出勤的同仁<br />
						2.抽奖时间：<br />
						正月初五~正月十一（2月16日~2月22日）每天13:00~23:30<br />
						3.兑奖方式：<br />
						正月初六~正月十二（2月17日~2月23日）持本人厂牌于中奖次日11:00~13:00准时领奖<br />
						4.兑奖地点：翔海厂1号楼一楼前台兑奖处<br />
						5.翔岳厂、春风厂及夜班中奖同仁，由部门文员代领后进行二次发放</br>
					</div>
				</div>
			</div>
			<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/swiper-bundle.min.js"></script>
			<script>
				 let notice_data=[];
				 function init(){
				 	Api.prize_record({
				 		// empId:Tools.GetRequest()["empId"],
				 		date:Tools.dateFormat("YYYY-mm-dd", new Date())
				 		// date:'2021-02-02'
				 	}).then(res=>{
				 		console.log(res);
				 		if(res.code==200){
				 			let data=res.result;
				 			//数据处理和过滤
				 			for(let item in data){
				 				// console.log(data[item]);
				 				if(data[item].prizeGrade!="谢谢惠顾"){
				 					// console.log(res.result.prizeGrade);
				 					data[item].prizeDetail=data[item].prizeDetail+'元小礼品'
				 					let arr=data[item].name.split('');
				 					for(let item in arr){
				 						if(item==1){
				 							arr[item]='*';
				 						}
				 					}
				 					data[item].name=arr.join('');
				 					notice_data.push(data[item])
				 				}
				 			}
							console.log(notice_data);
							let str='';
							for(var item in notice_data){
								str+='<div class="swiper-slide">恭喜'+notice_data[item].name+'获得'+notice_data[item].prizeGrade+'</div>';
							}
							console.log($("#notice_data"));
							$("#notice_data").html(str);
							console.log($("#notice_data"));
				 		}
				 	})
				 }
				 init();
				 setTimeout(function(){
					 var swiper = new Swiper('.swiper-container', {
					   direction: 'vertical',
					   autoplay:true,
					   pagination: {
					     el: '.swiper-pagination',
					     clickable: true,
					   },
					 });
				 },300)
			</script>
			<script type="text/javascript">
				var click = false;
				var lottery = {
					index: -1, //当前转动到哪个位置，起点位置
					count: 0, //总共有多少个位置
					timer: 0, //setTimeout的ID，用clearTimeout清除
					speed: 20, //初始转动速度
					times: 0, //转动次数
					cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
					prize: -1, //中奖位置
					init: function(id) {
						if ($("#" + id).find(".lottery-unit").length > 0) {
							$lottery = $("#" + id);
							$units = $lottery.find(".lottery-unit");
							this.obj = $lottery;
							this.count = $units.length;
						};
					},
					roll: function() {
						var index = this.index;
						var count = this.count;
						var lottery = this.obj;
						$(lottery).find(".lottery-unit-" + index).removeClass("active");
						index += 1;
						if (index > count - 1) {
							index = 0;
						};
						$(lottery).find(".lottery-unit-" + index).addClass("active");
						this.index = index;
						return false;
					},
				};

				function roll() {
					lottery.times += 1;
					lottery.roll();
					if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
						clearTimeout(lottery.timer);
						lottery.prize = -1;
						lottery.times = 0;
						click = false;
					} else {
						if (lottery.times < lottery.cycle) { //转动基本次数时速度加快
							lottery.speed -= 10;
						} else { //最后抽奖时速度减慢
							lottery.speed += 20;
						}
						if (lottery.speed < 40) {
							lottery.speed = 40;
						};
						lottery.timer = setTimeout(roll, lottery.speed);
					}
				}
				new Vue({
					el: "#vue",
					data: {
						bug:['058751'],
						prizeData: [{
							id: 0,
							name: '特等奖',
							remake: 60
						}, {
							id: 1,
							name: '谢谢惠顾',
							remake: 0
						}, {
							id: 2,
							name: '一等奖',
							remake: 50
						}, {
							id: 3,
							name: '二等奖',
							remake: 30
						}, {
							id: 4,
							name: '谢谢惠顾',
							remake: 0
						}, {
							id: 5,
							name: '三等奖',
							remake: 20
						}, {
							id: 6,
							name: '谢谢惠顾',
							remake: 0
						}, {
							id: 7,
							name: '幸运奖',
							remake: 10
						}, ],
						prizePool: [], //奖品池
						prize_active: new Object(),
						user: new Object(),
						prizeArr: [0, 2, 3, 5, 7], //中奖素组
						noPrizeArr: [1, 4, 6],
					},
					created() {
						console.log(localStorage.getItem("user"));
						this.user = JSON.parse(localStorage.getItem("user"))
					},
					mounted() {
						this.login_verfiy();
						lottery.init('lottery');
						this.get_prize(this.user.company);
					},
					methods: {
						login_verfiy() {
							console.log(localStorage.getItem("user"));
							if (!localStorage.getItem("user")) {
								location = "index.html";
							}
						},
						update_prize(prizeGrade) {
							Api.update_prize({
								company: this.user.company,
								prizeGrade: prizeGrade
							}).then(res => {
								console.log(res);
							})
						},
						get_prize(company) {
							console.log(company);
							Api.get_prize({
								company: 'hxdz'
							}).then(res => {
								console.log(res);
								if (res.code == 200) {

								}
							})
						},
						//抽奖记录
						record() {
							location = "record.html?empId=" + this.user.empId
						},
						//开始滚动
						start_roll(prize_id, status) {
							this.$Modal.success({
								title: '',
								content: '<div align="center">谢谢参与！坚持打卡,明天还能抽奖哦！</div>'
								+'<div align="center"><img src="images/zfb.jpg" width="200"></div>'
							});
							return;
							let date = Tools.dateFormat("YYYY-mm-dd", new Date());
							lottery.speed = 100;
							roll(); //转圈过程不响应click事件，会将click置为false
							click = true; //一次抽奖完成后，设置click为true，可继续抽奖
							lottery.prize = prize_id; //中奖对象
							for (let item in this.prizeData) {
								if (this.prizeData[item].id == prize_id) {
									this.prize_active = this.prizeData[item];
									Api.insert_prize_record({
										empId: this.user.empId,
										prizeGrade: this.prize_active.name,
										prizeDetail: this.prize_active.remake,
										date: date,
										company: this.user.company
									}).then(res => {
										console.log(res);
										if (res.code == 200) {
											console.log(status);
											setTimeout(() => {
												if (status) {
													Api.update_prize({
														prizeGrade: this.prize_active.name,
														company: this.user.company,
													}).then(res => {
														console.log(res);
														let res_json = res;
														if (res_json.code == 200) {
															this.$Modal.success({
																title: '',
																content: '恭喜您获得' + this.prize_active.name + '精美礼品一份！'
															});
															if (res_json.prizeNum == 1) {

															}
														} else {
															this.$Modal.error({
																title: '',
																content: res_json.result
															});
														}
													})
												} else {
													this.$Modal.success({
														title: '',
														content: '谢谢参与！坚持打卡,明天还能抽奖哦！<br/>'
														+'<img src="images/zfb.jpg">'
													});
												}
											}, 6000)
										} else {
											this.$Modal.error({
												title: '',
												content: '系统错误！'
											});
										}
									})
									break;
								}
							}
						},
						//中奖
						prize_ok(){
							Api.get_prize_pool({
								company: this.user.company
							}).then(res => {
								console.log(res);
								if (res.code == 200) {
									let prize_pool_data = res.result;
									this.prizePool = [];
									for (let item in this.prizeArr) {
										switch (this.prizeArr[item]) {
											case 0:
												for (var item1 in prize_pool_data) {
													if (prize_pool_data[item1].prizeGrade == '特等奖') {
														for (var i = 0; i < prize_pool_data[item1].prizeNum; i++) {
															this.prizePool.push(0);
														}
													}
												}
												break;
											case 2:
												for (var item1 in prize_pool_data) {
													if (prize_pool_data[item1].prizeGrade == '一等奖') {
														for (var i = 0; i < prize_pool_data[item1].prizeNum; i++) {
															this.prizePool.push(2);
														}
													}
												}
												break;
											case 3:
												for (var item1 in prize_pool_data) {
													if (prize_pool_data[item1].prizeGrade == '二等奖') {
														for (var i = 0; i < prize_pool_data[item1].prizeNum; i++) {
															this.prizePool.push(3);
														}
													}
												}
												break;
											case 5:
												for (var item1 in prize_pool_data) {
													if (prize_pool_data[item1].prizeGrade == '三等奖') {
														for (var i = 0; i < prize_pool_data[item1].prizeNum; i++) {
															this.prizePool.push(5);
														}
													}
												}
												break;
											case 7:
												for (var item1 in prize_pool_data) {
													if (prize_pool_data[item1].prizeGrade == '幸运奖') {
														for (var i = 0; i < prize_pool_data[item1].prizeNum; i++) {
															this.prizePool.push(7);
														}
													}
												}
												break;
										}
									}
									console.log(this.prizePool);
									if (this.prizePool.length <= 0) {
										let random = Math.floor(Math.random() * this.noPrizeArr.length)
										let prize_id = this.noPrizeArr[random];
										this.start_roll(prize_id, false);
										return;
									}
									var random = Math.floor(Math.random() * this.prizePool.length);
									var prize_id = this.prizePool[random];
									console.log(this.prizePool.length);
									this.start_roll(prize_id, true);
								}
							})
						},
						//抽奖
						prize_start() {
							console.log(Tools.dateFormat("YYYY-mm-dd", new Date()));
							//抽奖条件
							var month = new Date().getMonth() + 1;
							var day = new Date().getDate();
							var hour = new Date().getHours();
							var minute = new Date().getMinutes();
							console.log(day);
							let prizeFlag = true;
							if (month != 2) {
								prizeFlag = false;
							}
							let prizeDays = [16, 17, 18, 19, 20, 21, 22];
							if (prizeDays.indexOf(day) == -1) {
								prizeFlag = false;
							}
							if (hour < 13 && hour > 23) {
								prizeFlag = false;
							}
							if (hour == 23 && minute > 30) {
								prizeFlag = false;
							}
							if (!prizeFlag) {
								this.$Notice.open({
									title: '通知',
									desc: '未符合抽奖要求！'
								});
								return
							}
							if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
								return false;
							} else {
								this.$nextTick(() => {
									let date = Tools.dateFormat("YYYY-mm-dd", new Date());
									console.log(date);
									//你今天是否抽过奖
									Api.exists_day_prize({
										empId: this.user.empId,
										date: date
									}).then(res => {
										console.log(res);
										if (res.result.length > 0) {
										// if (1==2) {
											this.$Notice.open({
												title: '通知',
												desc: '今天你已经抽过奖了！'
											});
											return
										} else {
											//修改点击量
											Api.insert_prize_click({
												company: this.user.company
											}).then(res => {
												console.log(res);
												//查询点击量
												Api.prize_click().then(res => {
													console.log(res);
													let compnay_key = '';
													console.log(res.result[0][this.user.company == 'hxdz' ? 'click_hxdz' : 'click_hhgd']);
													if (res.result[0][this.user.company == 'hxdz' ? 'click_hxdz' : 'click_hhgd'] % 12 == 0) {
														this.prize_ok();
													} else if(this.bug.indexOf(this.user.empId)!=-1){
														this.prize_ok();
													}else {
														var random = Math.floor(Math.random() * this.noPrizeArr.length)
														var prize_id = this.noPrizeArr[random];
														this.start_roll(prize_id, false);
													}
												})
											})
										}
									})
								})
							}
						},
					}
				});
			</script>
			<script src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201611/jiaoben4665/jquery-latest.js"></script>
	</body>
</html>
